<script setup lang="ts">
import type { AppointmentManagement, AppointmentStatus } from '@shared/types/appointment'

import {
  Check,
  Clock,
  Delete,
  Plus,
  Refresh,
  Star,
  TrendCharts,
} from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { onMounted, reactive, ref } from 'vue'

import PlaceholderManagementDialog from '../components/PlaceholderManagementDialog.vue'

// 类型定义
// 扩展状态类型以支持完成状态
type ExtendedAppointmentStatus = AppointmentStatus | 'completed'

interface PlaceholderStatistics {
  total_placeholders: number
  active_placeholders: number
  today_generated: number
  by_service_type: Record<string, number>
  by_office_code: Record<string, number>
}

interface PlaceholderRecord extends Omit<AppointmentManagement, 'created_at' | 'updated_at'> {
  user_name: string
  date: string
  time: string
  status: ExtendedAppointmentStatus
  created_at: string
  expires_at: string
}

interface FilterOptions {
  appointment_status: string
  service_type: string
  office_code: string
  date_range: [Date, Date] | []
}

interface PaginationState {
  page: number
  page_size: number
  total: number
}

interface ConfigOptions {
  auto_placeholder: boolean
  placeholder_ratio: number
  hold_minutes: number
  auto_cleanup: boolean
  cleanup_interval: number
}

// 数据状态
const isDev = import.meta.env.DEV
const loading = ref(false)
const refreshingStats = ref(false)
const statistics = ref<PlaceholderStatistics>({
  total_placeholders: 0,
  active_placeholders: 0,
  today_generated: 0,
  by_service_type: {},
  by_office_code: {},
})
const placeholderRecords = ref<PlaceholderRecord[]>([])
const pagination = reactive<PaginationState>({
  page: 1,
  page_size: 20,
  total: 0,
})

// 筛选器
const filters = reactive<FilterOptions>({
  appointment_status: '',
  service_type: '',
  office_code: '',
  date_range: [],
})

// 配置
const config = reactive<ConfigOptions>({
  auto_placeholder: false,
  placeholder_ratio: 0.3,
  hold_minutes: 15,
  auto_cleanup: true,
  cleanup_interval: 2,
})

// 获取统计信息
async function refreshStatistics() {
  refreshingStats.value = true
  try {
    const response = await window.api.placeholder.statistics()
    if (response.success) {
      statistics.value = response.data
    }
    else {
      ElMessage.error(response.error || '获取统计信息失败')
    }
  }
  catch (error) {
    console.error('获取统计信息失败:', error)
    ElMessage.error('获取统计信息失败')
  }
  finally {
    refreshingStats.value = false
  }
}

// 刷新记录
async function refreshRecords() {
  loading.value = true
  try {
    const appointmentFilters = {
      is_placeholder: true,
      appointment_status: filters.appointment_status || undefined,
      service_type: filters.service_type || undefined,
      office_code: filters.office_code || undefined,
      created_at_start: filters.date_range[0] ? new Date(filters.date_range[0]).toISOString() : undefined,
      created_at_end: filters.date_range[1] ? new Date(filters.date_range[1]).toISOString() : undefined,
    }

    const response = await window.api.appointment.list(appointmentFilters, {
      page: pagination.page,
      page_size: pagination.page_size,
    })

    if (response.success) {
      placeholderRecords.value = response.data.appointments.map((record: AppointmentManagement): PlaceholderRecord => ({
        ...record,
        user_name: record.full_name,
        date: new Date(record.preferred_dates ? JSON.parse(record.preferred_dates)[0] : record.created_at).toLocaleDateString('zh-CN'),
        time: record.preferred_times ? JSON.parse(record.preferred_times).join(', ') : '未指定',
        status: record.appointment_status,
        created_at: new Date(record.created_at).toLocaleString('zh-CN'),
        expires_at: record.updated_at ? new Date(record.updated_at).toLocaleString('zh-CN') : '-',
      }))
      pagination.total = response.data.total
    }
    else {
      ElMessage.error(response.error || '获取占号记录失败')
    }
  }
  catch (error) {
    console.error('获取占号记录失败:', error)
    ElMessage.error('获取占号记录失败')
  }
  finally {
    loading.value = false
  }
}

// 更新配置
async function updateConfig() {
  try {
    // TODO: 调用API更新配置
    // await window.api.placeholder.updateConfig(config);
    ElMessage.success('配置已更新')
  }
  catch (error) {
    console.error('更新配置失败:', error)
    ElMessage.error('更新配置失败')
  }
}

// 转换占号为实际预约
async function convertPlaceholder(record: PlaceholderRecord) {
  try {
    await ElMessageBox.confirm(
      `确定要将占号转换为实际预约吗？\n姓名: ${record.user_name}\n日期: ${record.date}\n时间: ${record.time}`,
      '确认转换',
      {
        confirmButtonText: '转换',
        cancelButtonText: '取消',
        type: 'warning',
      },
    )

    // 将占号记录的is_placeholder设置为false，表示转为实际预约
    const response = await window.api.appointment.update(record.id, {
      is_placeholder: false,
      remarks: `${record.remarks || ''} [从占号转换为实际预约]`,
    })

    if (response.success) {
      ElMessage.success('占号转换成功！')
      refreshRecords()
      refreshStatistics()
    }
    else {
      ElMessage.error(response.error || '转换占号失败')
    }
  }
  catch (error) {
    if (error !== 'cancel') {
      console.error('转换占号失败:', error)
      ElMessage.error('转换占号失败')
    }
  }
}

// 释放占号
async function releasePlaceholder(record: PlaceholderRecord) {
  try {
    await ElMessageBox.confirm(
      `确定要释放这个占号吗？\n姓名: ${record.user_name}\n日期: ${record.date}\n时间: ${record.time}`,
      '确认释放',
      {
        confirmButtonText: '释放',
        cancelButtonText: '取消',
        type: 'warning',
      },
    )

    const response = await window.api.placeholder.releaseByIds([record.id])
    if (response.success) {
      ElMessage.success(`占号已释放 (释放了 ${response.data} 个记录)`)
      refreshRecords()
      refreshStatistics()
    }
    else {
      ElMessage.error(response.error || '释放占号失败')
    }
  }
  catch (error) {
    if (error !== 'cancel') {
      console.error('释放占号失败:', error)
      ElMessage.error('释放占号失败')
    }
  }
}

// 清理过期占号
async function cleanupExpired() {
  try {
    await ElMessageBox.confirm(
      '确定要清理所有过期的占号记录吗？此操作将删除状态为已取消或已完成的占号记录。',
      '确认清理',
      {
        confirmButtonText: '清理',
        cancelButtonText: '取消',
        type: 'warning',
      },
    )

    // 获取过期占号的ID列表
    const expiredRecords = placeholderRecords.value.filter(record =>
      record.status === 'cancelled' || record.status === 'completed',
    )

    if (expiredRecords.length === 0) {
      ElMessage.info('没有过期的占号记录需要清理')
      return
    }

    const expiredIds = expiredRecords.map(record => record.id)
    const response = await window.api.placeholder.cleanupByIds(expiredIds)

    if (response.success) {
      ElMessage.success(`过期占号已清理 (清理了 ${response.data} 个记录)`)
      refreshRecords()
      refreshStatistics()
    }
    else {
      ElMessage.error(response.error || '清理过期占号失败')
    }
  }
  catch (error) {
    if (error !== 'cancel') {
      console.error('清理过期占号失败:', error)
      ElMessage.error('清理过期占号失败')
    }
  }
}

// 分页变化处理
function handlePageChange(page: number) {
  pagination.page = page
  refreshRecords()
}

// 每页条数变化处理
function handleSizeChange(size: number) {
  pagination.page_size = size
  pagination.page = 1
  refreshRecords()
}

// 筛选条件变化
function handleFilterChange() {
  pagination.page = 1
  refreshRecords()
}

// 获取状态类型
function getStatusType(status: ExtendedAppointmentStatus): string {
  switch (status) {
    case 'pending': return 'warning'
    case 'booked': return 'primary'
    case 'confirmed': return 'success'
    case 'completed': return 'primary'
    case 'cancelled': return 'info'
    case 'failed': return 'danger'
    default: return 'info'
  }
}

// 获取状态文本
function getStatusText(status: ExtendedAppointmentStatus): string {
  switch (status) {
    case 'pending': return '待处理'
    case 'booked': return '已预约'
    case 'confirmed': return '已确认'
    case 'completed': return '已完成'
    case 'cancelled': return '已取消'
    case 'failed': return '失败'
    default: return '未知'
  }
}

// 显示占号管理对话框
const showPlaceholderDialog = ref(false)

function openPlaceholderDialog() {
  showPlaceholderDialog.value = true
}

// 占号对话框成功回调
function onPlaceholderSuccess() {
  refreshRecords()
  refreshStatistics()
}

// 批量操作
const selectedRecords = ref<PlaceholderRecord[]>([])

function handleSelectionChange(selection: PlaceholderRecord[]) {
  selectedRecords.value = selection
}

// 批量释放
async function batchRelease() {
  if (selectedRecords.value.length === 0) {
    ElMessage.warning('请先选择要释放的占号记录')
    return
  }

  try {
    await ElMessageBox.confirm(
      `确定要批量释放 ${selectedRecords.value.length} 个占号记录吗？`,
      '批量释放确认',
      {
        confirmButtonText: '释放',
        cancelButtonText: '取消',
        type: 'warning',
      },
    )

    const ids = selectedRecords.value.map(record => record.id)
    const response = await window.api.placeholder.releaseByIds(ids)

    if (response.success) {
      ElMessage.success(`批量释放成功 (释放了 ${response.data} 个记录)`)
      refreshRecords()
      refreshStatistics()
      selectedRecords.value = []
    }
    else {
      ElMessage.error(response.error || '批量释放失败')
    }
  }
  catch (error) {
    if (error !== 'cancel') {
      console.error('批量释放失败:', error)
      ElMessage.error('批量释放失败')
    }
  }
}

// 批量清理
async function batchCleanup() {
  if (selectedRecords.value.length === 0) {
    ElMessage.warning('请先选择要清理的占号记录')
    return
  }

  try {
    await ElMessageBox.confirm(
      `确定要批量清理 ${selectedRecords.value.length} 个占号记录吗？此操作将永久删除记录。`,
      '批量清理确认',
      {
        confirmButtonText: '清理',
        cancelButtonText: '取消',
        type: 'warning',
      },
    )

    const ids = selectedRecords.value.map(record => record.id)
    const response = await window.api.placeholder.cleanupByIds(ids)

    if (response.success) {
      ElMessage.success(`批量清理成功 (清理了 ${response.data} 个记录)`)
      refreshRecords()
      refreshStatistics()
      selectedRecords.value = []
    }
    else {
      ElMessage.error(response.error || '批量清理失败')
    }
  }
  catch (error) {
    if (error !== 'cancel') {
      console.error('批量清理失败:', error)
      ElMessage.error('批量清理失败')
    }
  }
}

// 初始化
onMounted(() => {
  refreshRecords()
  refreshStatistics()
})
</script>

<template>
  <div class="placeholder-page">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="text-2xl text-gray-800 font-bold">
        占号管理
      </h2>
      <p class="mt-1 text-gray-600">
        管理预约占号策略，提高预约成功率
      </p>
    </div>

    <!-- 统计卡片 -->
    <div class="stats-grid">
      <div class="stat-card">
        <div class="stat-icon bg-blue-100 text-blue-600">
          <el-icon><Star /></el-icon>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">
            {{ statistics.total_placeholders || 0 }}
          </h3>
          <p class="stat-label">
            总占号数
          </p>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon bg-green-100 text-green-600">
          <el-icon><Check /></el-icon>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">
            {{ statistics.active_placeholders || 0 }}
          </h3>
          <p class="stat-label">
            活跃占号
          </p>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon bg-yellow-100 text-yellow-600">
          <el-icon><Clock /></el-icon>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">
            {{ statistics.today_generated || 0 }}
          </h3>
          <p class="stat-label">
            今日生成
          </p>
        </div>
      </div>

      <div class="stat-card">
        <div class="stat-icon bg-purple-100 text-purple-600">
          <el-icon><TrendCharts /></el-icon>
        </div>
        <div class="stat-content">
          <h3 class="stat-number">
            {{ Object.keys(statistics.by_service_type || {}).length }}
          </h3>
          <p class="stat-label">
            服务类型
          </p>
        </div>
      </div>
    </div>

    <!-- 占号策略配置（仅开发环境显示） -->
    <div v-if="isDev" class="strategy-section">
      <div class="section-title">
        <h3>占号策略配置</h3>
        <p class="text-gray-600">
          配置占号的触发条件和策略参数
        </p>
      </div>

      <div class="config-cards">
        <div class="config-card">
          <div class="config-header">
            <h4 class="config-name">
              自动占号
            </h4>
            <el-switch v-model="config.auto_placeholder" @change="updateConfig" />
          </div>
          <div class="config-description">
            当检测到可用预约时段时，自动创建占号记录
          </div>
          <div v-if="config.auto_placeholder" class="config-details">
            <div class="detail-item">
              <span class="detail-label">占号比例:</span>
              <el-slider
                v-model="config.placeholder_ratio"
                :min="0.1"
                :max="1.0"
                :step="0.1"
                :format-tooltip="(val) => `${(val * 100).toFixed(0)}%`"
                @change="updateConfig"
              />
            </div>
            <div class="detail-item">
              <span class="detail-label">保持时间:</span>
              <el-input-number
                v-model="config.hold_minutes"
                :min="5"
                :max="60"
                @change="updateConfig"
              /> 分钟
            </div>
          </div>
        </div>

        <div class="config-card">
          <div class="config-header">
            <h4 class="config-name">
              占号清理
            </h4>
            <el-switch v-model="config.auto_cleanup" @change="updateConfig" />
          </div>
          <div class="config-description">
            自动清理过期或无效的占号记录
          </div>
          <div v-if="config.auto_cleanup" class="config-details">
            <div class="detail-item">
              <span class="detail-label">清理间隔:</span>
              <el-input-number
                v-model="config.cleanup_interval"
                :min="1"
                :max="24"
                @change="updateConfig"
              /> 小时
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 统计分布（仅开发环境显示） -->
    <div v-if="isDev && (Object.keys(statistics.by_service_type || {}).length > 0 || Object.keys(statistics.by_office_code || {}).length > 0)" class="distribution-section">
      <div class="section-title">
        <h3>数据分布</h3>
      </div>

      <div class="distribution-grid">
        <!-- 按服务类型分布 -->
        <div v-if="Object.keys(statistics.by_service_type || {}).length > 0" class="distribution-card">
          <h4 class="distribution-title">
            服务类型分布
          </h4>
          <div class="distribution-items">
            <div
              v-for="(count, serviceType) in statistics.by_service_type"
              :key="serviceType"
              class="distribution-item"
            >
              <div class="item-label">
                {{ serviceType }}
              </div>
              <div class="item-count">
                {{ count }}
              </div>
              <div class="item-progress">
                <div
                  class="progress-bar"
                  :style="{ width: `${(count / statistics.total_placeholders) * 100}%` }"
                />
              </div>
            </div>
          </div>
        </div>

        <!-- 按办理地点分布 -->
        <div v-if="Object.keys(statistics.by_office_code || {}).length > 0" class="distribution-card">
          <h4 class="distribution-title">
            办理地点分布
          </h4>
          <div class="distribution-items">
            <div
              v-for="(count, officeCode) in statistics.by_office_code"
              :key="officeCode"
              class="distribution-item"
            >
              <div class="item-label">
                {{ officeCode }}
              </div>
              <div class="item-count">
                {{ count }}
              </div>
              <div class="item-progress">
                <div
                  class="progress-bar office"
                  :style="{ width: `${(count / statistics.total_placeholders) * 100}%` }"
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选器 -->
    <div class="filter-section">
      <div class="section-title">
        <h3>数据筛选</h3>
      </div>

      <div class="filter-form">
        <el-row :gutter="16">
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select v-model="filters.appointment_status" placeholder="全部状态" clearable @change="handleFilterChange">
                <el-option label="待处理" value="pending" />
                <el-option label="已预约" value="booked" />
                <el-option label="已确认" value="confirmed" />
                <el-option label="已完成" value="completed" />
                <el-option label="已取消" value="cancelled" />
                <el-option label="失败" value="failed" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="服务类型">
              <el-select v-model="filters.service_type" placeholder="全部类型" clearable @change="handleFilterChange">
                <el-option label="DI" value="DI" />
                <el-option label="其他" value="OTHER" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="办理地点">
              <el-select v-model="filters.office_code" placeholder="全部地点" clearable @change="handleFilterChange">
                <el-option label="HKLO" value="HKLO" />
                <el-option label="KLO" value="KLO" />
                <el-option label="KTO" value="KTO" />
                <el-option label="STO" value="STO" />
                <el-option label="YLO" value="YLO" />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6">
            <el-form-item label="创建日期">
              <el-date-picker
                v-model="filters.date_range"
                type="daterange"
                format="YYYY-MM-DD"
                placeholder="选择日期范围"
                @change="handleFilterChange"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 占号记录列表 -->
    <div class="records-section">
      <div class="section-header">
        <h3>占号记录 ({{ pagination.total }})</h3>
        <div class="section-actions">
          <el-button type="success" @click="openPlaceholderDialog">
            <el-icon><Plus /></el-icon>
            生成占号
          </el-button>
          <el-button type="primary" :loading="loading" @click="refreshRecords">
            <el-icon><Refresh /></el-icon>
            刷新
          </el-button>
          <el-button @click="cleanupExpired">
            <el-icon><Delete /></el-icon>
            清理过期
          </el-button>
        </div>
      </div>

      <!-- 批量操作栏 -->
      <div v-if="selectedRecords.length > 0" class="batch-actions">
        <div class="batch-info">
          <span>已选择 {{ selectedRecords.length }} 项</span>
        </div>
        <div class="batch-buttons">
          <el-button type="warning" size="small" @click="batchRelease">
            批量释放
          </el-button>
          <el-button type="danger" size="small" @click="batchCleanup">
            批量清理
          </el-button>
        </div>
      </div>

      <div class="table-container">
        <el-table
          v-loading="loading"
          :data="placeholderRecords"
          stripe
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="sequence_number" label="流水号" width="120" />
          <el-table-column prop="user_name" label="姓名" width="100" />
          <el-table-column prop="passport_number" label="护照号码" width="120" />
          <el-table-column prop="service_type" label="服务类型" width="100" />
          <el-table-column prop="office_code" label="办理地点" width="100" />
          <el-table-column prop="date" label="偏好日期" width="120" />
          <el-table-column label="状态" width="100">
            <template #default="scope">
              <el-tag
                :type="getStatusType(scope.row.status)"
                size="small"
              >
                {{ getStatusText(scope.row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="created_at" label="创建时间" width="150" />
          <el-table-column label="操作" width="160" fixed="right">
            <template #default="scope">
              <el-button-group size="small">
                <el-button
                  v-if="scope.row.status === 'pending'"
                  type="success"
                  size="small"
                  @click="convertPlaceholder(scope.row)"
                >
                  转换
                </el-button>
                <el-button
                  v-if="scope.row.status === 'pending'"
                  type="warning"
                  size="small"
                  @click="releasePlaceholder(scope.row)"
                >
                  释放
                </el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 分页器 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="pagination.page"
          v-model:page-size="pagination.page_size"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </div>

    <!-- 占号管理对话框 -->
    <PlaceholderManagementDialog
      v-model="showPlaceholderDialog"
      @success="onPlaceholderSuccess"
    />
  </div>
</template>

<style scoped>
.placeholder-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 0;
}

.page-header {
  margin-bottom: 20px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.stat-card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  align-items: center;
  gap: 16px;
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

.stat-label {
  color: #666;
  margin: 4px 0 0 0;
  font-size: 14px;
}

.strategy-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.section-title {
  margin-bottom: 20px;
}

.section-title h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.config-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 16px;
}

.config-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  background: #fafafa;
}

.config-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.config-name {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.config-description {
  color: #666;
  margin-bottom: 12px;
  font-size: 14px;
}

.config-details {
  border-top: 1px solid #e0e0e0;
  padding-top: 12px;
}

.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}

.detail-label {
  color: #666;
  min-width: 80px;
}

.records-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.section-actions {
  display: flex;
  gap: 8px;
}

.filter-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.filter-form :deep(.el-form-item) {
  margin-bottom: 0;
}

.filter-form :deep(.el-form-item__label) {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.table-container {
  background: white;
  border-radius: 4px;
  overflow: hidden;
}

.batch-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #e7f3ff;
  border: 1px solid #b3d8ff;
  border-radius: 4px;
  margin-bottom: 12px;
}

.batch-info {
  color: #409eff;
  font-weight: 500;
}

.batch-buttons {
  display: flex;
  gap: 8px;
}

.distribution-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin-bottom: 20px;
}

.distribution-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 20px;
}

.distribution-card {
  padding: 16px;
  background: #fafafa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.distribution-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 12px 0;
  color: #333;
}

.distribution-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.distribution-item {
  display: grid;
  grid-template-columns: 80px 60px 1fr;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
}

.item-label {
  font-weight: 500;
  color: #666;
}

.item-count {
  font-weight: 600;
  color: #409eff;
  text-align: right;
}

.item-progress {
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  background: #409eff;
  transition: width 0.3s ease;
}

.progress-bar.office {
  background: #67c23a;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding: 16px;
  background: white;
  border-radius: 8px;
}
</style>
